<template>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="header-section">
				<text class="header-title">泉州风光</text>
				<swiper class="header-swiper" :autoplay="true" :interval="3000" :duration="500" indicator-dots="true">
					<swiper-item style="background-color: #8088080;">
						<image src="/static/city1.png" class="header-swiper-img" />
					</swiper-item>
					<swiper-item>
						<image src="/static/city2.jpg" class="header-swiper-img" />
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.jpg" class="header-swiper-img" />
					</swiper-item>
					<swiper-item>
						<image src="/static/city4.jpg" class="header-swiper-img" />
					</swiper-item>
					<swiper-item>
						<image src="/static/city5.jpg" class="header-swiper-img" />
					</swiper-item>
				</swiper>
			</view>
		</scroll-view>
	</view>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="intro-section">
				<text class="intro-title">泉州介绍</text>
				<text class="intro-desc">海丝之路起点 - 泉州</text>
				<text class="intro-content"><text style="color: black;">历史文化：</text>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期曾被誉为“东方第一大港”。</text>
				<text class="intro-content"><text style="color: black;">著名景点：</text>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
				<text class="intro-content"><text style="color: black;">特色文化：</text>拥有<text style="color:#00BBFF;">南音、木偶戏和闽南建筑</text>等丰富的非物质文化遗产。</text>
			</view>
		</scroll-view>
	</view>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="progress-section">
				<view><text class="progress-title">探索进度</text></view>
				<text class="progress-text">当前进度: {{ progress }}%</text>
				<progress :percent="progress" stroke-width="5" activeColor="#007aff" class="progress-bar" />
			</view>
		</scroll-view>
	</view>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="city-section">
				<text class="city-title">选择城市</text>
				<picker mode="multiSelector" :range="cityRange" @columnchange="onColumnChange" @change="onCityChange">
					<view class="city-picker">
						当前选择: {{ SelectedProvince }} - {{ SelectedCity }} - {{ SelectedArea }}
					</view>
				</picker>
			</view>
		</scroll-view>
	</view>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="video-section">
				<text class="video-title">泉州宣传</text>
				<video :src="videoUrl" class="video-player" controls></video>
			</view>
		</scroll-view>
	</view>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="audio-section">
				<text class="audio-title">泉州背景音乐</text>
				<view class="audio-btn-wrap">
					<button @click="playAudio">播放</button>
				</view>
				<view class="audio-name-text"><text>{{ audioName }}</text></view>
			</view>
		</scroll-view>
	</view>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view class="setting-section">
				<text class="setting-title">偏好设置</text>
				<text class="setting-subtitle">出行方式</text>
				<radio-group @change="onTravelChange" class="setting-radio-group">
					<label class="setting-radio-label" v-for="(item, idx) in travelModes" :key="idx">
						<radio :value="item" :checked="selectedTravel === item" />{{ item }}
					</label>
				</radio-group>	
				<view class="setting-switch-wrap">
					<text class="setting-subtitle">显示推荐景点:</text>
					<switch :checked="showRecommend" @change="onRecommendChange" class="setting-switch" />
				</view>
				<view class="setting-slider-wrap">
					<text class="setting-subtitle">探索半径: {{ radius }}km</text>
					<slider :value="radius" min="1" max="20" @change="onRadiusChange" class="setting-slider" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			progress: 60,
		
		    cityRange: [
				["福建省"],
		        ["泉州市"],
		        ["南安市"]
		    ],
		    SelectedProvince: "福建省",
		    SelectedCity: "泉州市",
		    SelectedArea: "南安市",
			videoUrl: "/static/city-video.mp4", 
			audioName: "泉州南音·泉州传统乐团",
			travelModes: ["公交", "自驾", "步行"],
			selectedTravel: "公交",
			showRecommend: true,
			radius: 12
			}
		},
		methods: {
 onTravelChange(e) {
      this.selectedTravel = e.detail.value;
    },
    onRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
    playAudio() {
      const audio = uni.createInnerAudioContext();
      audio.src = "/static/city-music.mp3"; 
      audio.play();
    }

		}
	}
</script>

<style>

.container {
    width: 400px;
    margin: 10px auto;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.scroll-container {
    height: 100%;
}

.header-section {
    width: 100%;
}
.header-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.header-swiper {
    width: 100%;
    height: 400rpx;
}
.header-swiper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-section {
    width: 100%;
}
.intro-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.intro-desc {
	font-size: 33rpx;
	color: #000000;
	display: block;
	margin-bottom: 15rpx;
}
.intro-content {
	font-size: 28rpx;
	color: #808080;
	display: block;
	margin-bottom: 10rpx;
	line-height: 1.5;
}

.progress-section {
    width: 100%;
}
.progress-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.progress-text {
    font-size: 28rpx;
    margin: 10rpx 0;
    display: block;
}
.progress-bar {
    width: 100%;
    margin-top: 10rpx;
}

.city-section {
    width: 100%;
}
.city-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.city-picker {
	font-size: 28rpx;
	padding: 15rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
}

.video-section {
    width: 100%;
}
.video-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.video-player {
	width: 100%;
	height: 300rpx;
}

.audio-section {
    width: 100%;
}
.audio-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.audio-btn-wrap {
	text-align: center;
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	gap: 15rpx;
	justify-content: center;
}
.audio-name-text {
	display: block;
    text-align: center;
    font-size: 15px;
    margin: 10px;
}

.setting-section {
    width: 100%;
}
.setting-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}
.setting-subtitle {
	font-size: 30rpx;
	margin: 20rpx 0;
	display: block;
}
.setting-radio-group {
    display: flex;
    flex-wrap: wrap;
}
.setting-radio-label {
	margin-right: 25rpx;
	font-size: 30rpx;
	margin-bottom: 10rpx;
}
.setting-switch-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.setting-slider-wrap {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}
.setting-slider {
    width: 100%;
}
</style>
